<template>
  <div class="addform">
    <h1>增加日记</h1>
    <br />
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-position="right"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="重点事件:">
        <el-switch v-model="importTF"></el-switch>
      </el-form-item>
      <el-form-item label="标题:" prop="storyTitle">
        <el-input v-model="ruleForm.storyTitle" class="inputS"></el-input>
      </el-form-item>
      <el-form-item label="幽默标题:" prop="humorTitle">
        <el-input v-model="ruleForm.humorTitle" class="inputS"></el-input>
      </el-form-item>
      <el-form-item label="发生地点:" prop="storySite">
        <el-input v-model="ruleForm.storySite" class="inputS"></el-input>
      </el-form-item>
      <el-form-item label="发生时间:" prop="storyDate">
        <el-date-picker
          v-model="ruleForm.storyDate"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="文章第一段:" prop="storyFirst">
        <el-input
          type="textarea"
          v-model="ruleForm.storyFirst"
          :rows="4"
          class="inputL"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章第二段:" prop="storySecond">
        <el-input
          type="textarea"
          v-model="ruleForm.storySecond"
          :rows="4"
          class="inputL"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章第三段:" prop="storyThird">
        <el-input
          type="textarea"
          v-model="ruleForm.storyThird"
          :rows="4"
          class="inputL"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章总结:" prop="storySummary">
        <el-input
          type="textarea"
          v-model="ruleForm.storySummary"
          :rows="2"
          class="inputL"
        ></el-input>
      </el-form-item>
      <!-- 图片1 -->
      <el-form-item label="上传图片1:" prop="storyImg1">
        <el-upload
          :action="this.uploadIndex1"
          list-type="picture-card"
          ref="upload1"
          :auto-upload="false"
          :on-change="
            (file) => {
              beforeAvatarUpload(1, file);
            }
          "
          :on-success="
            (res, file) => {
              handleAvatarSuccess(1, res, file);
            }
          "
        >
          <i slot="default" class="el-icon-plus"></i>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过20mb
          </div>
          <!-- 图片 -->
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="Pview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
            </span>
          </div>
        </el-upload>
      </el-form-item>
      <!-- 图片2 -->
      <el-form-item label="上传图片2:" prop="storyImg2">
        <el-upload
          :action="this.uploadIndex1"
          list-type="picture-card"
          ref="upload2"
          :auto-upload="false"
          :on-change="
            (file) => {
              beforeAvatarUpload(2, file);
            }
          "
          :on-success="
            (res, file) => {
              handleAvatarSuccess(2, res, file);
            }
          "
        >
          <i slot="default" class="el-icon-plus"></i>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过20mb
          </div>
          <!-- 图片 -->
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="Pview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
            </span>
          </div>
        </el-upload>
      </el-form-item>
      <!-- 图片3 -->
      <el-form-item label="上传图片3:" prop="storyImg3">
        <el-upload
          :action="this.uploadIndex1"
          list-type="picture-card"
          ref="upload3"
          :auto-upload="false"
          :on-change="
            (file) => {
              beforeAvatarUpload(3, file);
            }
          "
          :on-success="
            (res, file) => {
              handleAvatarSuccess(3, res, file);
            }
          "
        >
          <i slot="default" class="el-icon-plus"></i>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过20mb
          </div>
          <!-- 图片 -->
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="Pview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
            </span>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >添加信息</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 成功提示 -->
    <el-dialog
      title="温馨提示"
      :visible.sync="successVisible"
      width="20%"
      @close="resetForm(ruleForm)"
      append-to-body
    >
      <div class="dialogSuc">
        <el-button
          type="success"
          icon="el-icon-check"
          circle
          @click="successVisible"
        ></el-button>
        <h2>添加成功</h2>
      </div>
    </el-dialog>
    <!-- 图片预览 -->
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      importTF: false,
      //图片预览 下3个
      url: "",
      dialogImageUrl: "",
      dialogVisible: false,
      
      disabled: false,
      successVisible: false,
      ruleForm: {
        //保证前后端名称相同
        storyTitle: "",
        humorTitle: "",
        storySite: "",
        storyDate: "",
        storyFirst: "",
        storySecond: "",
        storyThird: "",
        storySummary: "",
        storyImg1: "",
        storyImg2: "",
        storyImg3: "",
        focus: 0,
      },
      rules: {
        //如果没输入的提示信息
        storyTitle: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { max: 15, message: "最大长度15个字", trigger: "blur" },
        ],
        humorTitle: [
          { required: true, message: "请输入幽默标题", trigger: "blur" },
          { max: 50, message: "最大长度50个字", trigger: "blur" },
        ],
        storySite: [
          { required: true, message: "请输入发生地点", trigger: "blur" },
          { max: 15, message: "最大长度15个字", trigger: "blur" },
        ],
        storyDate: [{ required: true, message: "请选择日期", trigger: "blur" }],
        storyFirst: [
          { required: true, message: "请输入故事第一段", trigger: "blur" },
          { max: 500, message: "最大长度500个字", trigger: "blur" },
        ],
        storySummary: [
          { required: true, message: "请输入故事总结", trigger: "blur" },
          { max: 100, message: "最大长度100个字", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 预览 无需管
    Pview(file) {
      console.log(file.url);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传图片判断
    beforeAvatarUpload(idx, file) {
      console.log(idx, file);
      const isLt10M = file.size / 1024 / 1024 < 10;
      console.log("文件大小:" + (file.size / 1024 / 1024).toFixed(2) + "MB");
      if (!isLt10M) {
        this.$message.error("上传图片大小不能超过 10MB!");
        if (idx == 1) {
          this.$refs.upload1.clearFiles();
        }
        if (idx == 2) {
          this.$refs.upload2.clearFiles();
        }
        if (idx == 3) {
          this.$refs.upload3.clearFiles();
        }
      } else {
        if (idx == 1) {
          this.$refs.upload1.submit();
        }
        if (idx == 2) {
          this.$refs.upload2.submit();
        }
        if (idx == 3) {
          this.$refs.upload3.submit();
        }
      }
      return isLt10M;
    },
    //上传
    handleAvatarSuccess(idx, res, file) {
      console.log(idx, res, file);
      this.disabled = true;
      if (idx == 1) {
        this.ruleForm.storyImg1 = "/assets/myIndex/img/" + file.name;
        console.log("图片1:" + this.ruleForm.storyImg1);
      }
      if (idx == 2) {
        this.ruleForm.storyImg2 = "/assets/myIndex/img/" + file.name;
        console.log("图片2:" + this.ruleForm.storyImg2);
      }
      if (idx == 3) {
        this.ruleForm.storyImg3 = "/assets/myIndex/img/" + file.name;
        console.log("图片3:" + this.ruleForm.storyImg3);
      }
    },
    submitForm(formName) {
      // 是否为重点,进行判断
      if (this.importTF) {
        this.ruleForm.focus = 1;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 由于axios内部必须使用_this才能使用this
          const _this = this;
          this.axios({
            method: "post",
            url: _this.baseUrl + "/index/post/addStory",
            //传递给后端的数据
            data: _this.ruleForm,
          }).then(function (resp) {
            console.log(resp.data);
            _this.successVisible = true; //提交成功提示
            _this.resetForm("ruleForm");
          });
        } else {
          console.log("增加失败");
          return false;
        }
      });
    },
    resetForm(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.addform {
  width: 80%;
  margin: 0 auto;
  .inputS {
    width: 80%;
  }
  .inputL {
    width: 80%;
    display: block;
  }
  .imgPreview {
    width: 150px;
    height: 150px;
    margin-right: 15px;
    float: left;
    cursor: pointer;
  }
}
.dialogSuc {
  display: block;
  margin: 0 auto;
  width: 50%;
  button {
    display: block;
    margin: 0 auto;
  }
  h2 {
    color: green;
    text-align: center;
  }
}
</style>